<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MapboxGL</title>
    <link href='lib/mapbox-gl.css' rel='stylesheet' />
    <style>
        html, body, .map {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
        }
        .measure-tools {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 99;
        }

        .tool-tips {
            padding: 3px 5px;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.45);
            color: white;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div id='map' class="map">
    <div class="measure-tools">
        <button id="length">测距</button>
        <button id="area">测面</button>
        <button id="deactive">结束测量</button>
    </div>
</div>
<script src='lib/mapbox-gl.js'></script>
<script src='lib/turf.min.js'></script>
<script src='js/measure-tool.js'></script>
<script src='js/lesson7-1.js'></script>
</body>
</html>